<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>音乐工厂(计算属性)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
	<!-- 10分钟  完成搜索案例 -->
	<div id="app">
		搜索：<input type="text" v-model="searchValue"> <button @click="sortType = !sortType">排序</button>
		<h2>2002年华语乐坛排行榜</h2>
		<ul>
			<li v-for="item in searchList" :key="item.id">
				排行:{{ item.id }} 歌曲: {{ item.name }} 歌手: {{ item.sname }}
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			data:{
				searchValue:'',//搜索内容
				musicList:[],//音乐数据
				sortType:true//排序 true代表升序
			},
			computed:{//计算属性
				searchList(){
					//filter会把数据进行循环 为true保留数据 为false移除数据
					const arr = this.musicList.filter((p) =>{
						//p 就是每次循环的数据
						//indexOf 如果包含数据返回数据下标 不包含返回-1
						if(p.name.indexOf(this.searchValue) !== -1 
						|| p.sname.indexOf(this.searchValue) !== -1
						|| p.id.indexOf(this.searchValue) !== -1){
							return true;
						}else{
							return false;
						}
					});
					//排序 
					arr.sort((p1,p2) =>{
						if(this.sortType){//升序
							return p1.id - p2.id;
						}else{ 
							return p2.id - p1.id;
						}
					});
					return arr;
				}
			}
		})
		//另外的赋值方法
		vm.musicList = [
				{id:'1', name:'想唱就唱',sname:'张含韶'}
				,{id:'2', name:'冰点与沸点',sname:'张含韶'}
				,{id:'3', name:'夕阳无限好',sname:'陈奕迅'}
				,{id:'4', name:'爱的证明',sname:'沈建祥'}
				,{id:'5', name:'刻下纹身之后' ,sname:'小鸣'}
				,{id:'6', name:'双面人' ,sname:'伍佰'}
				,{id:'7', name:'长情' ,sname:'黎明'}
				,{id:'8', name:'我得你' ,sname:'张学友'}
				,{id:'9', name:'人人望放假' ,sname:'张学友'}
				,{id:'10', name:'太平洋的风' ,sname:'胡德夫'}
				,{id:'11', name:'吻下留人' ,sname:'许志安'}
				,{id:'12', name:'顺时针' ,sname:'梁咏琪'}
				,{id:'13', name:'回来我的爱' ,sname:'阳一'}
				,{id:'14', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'15', name:'老鼠爱大米' ,sname:'杨臣刚'}
				,{id:'16', name:'丁香花' ,sname:'唐磊'}
				,{id:'17', name:'爱你' ,sname:'冷草莓'}
				,{id:'18', name:'美梦成真' ,sname:'冷草莓'}
				,{id:'19', name:'老鼠爱大米' ,sname:'huanggm2'}
				,{id:'20', name:'谢谢你的爱1999' ,sname:'cznana'}
				,{id:'21', name:'老鼠爱大米' ,sname:'英文版'}
				,{id:'22', name:'猪之歌' ,sname:'香香'}
				,{id:'23', name:'“吻别”英文版' ,sname:'Michael..'}
				,{id:'24', name:'别说我的眼泪你无..' ,sname:'东来东往'}
				,{id:'25', name:'追杀邱比特' ,sname:'蔡依林'}
				,{id:'26', name:'被风吹过的夏天' ,sname:'金莎'}
				,{id:'27', name:'你到底爱谁' ,sname:'刘嘉亮'}
				,{id:'28', name:'六月的雨' ,sname:'胡歌'}
				,{id:'29', name:'酸酸甜甜就是我' ,sname:'张含韵'}
				,{id:'30', name:'你好,周杰伦' ,sname:'安又淇'}
				,{id:'31', name:'江南' ,sname:'林俊杰'}
				,{id:'32', name:'情人' ,sname:'刀郎'}
				,{id:'33', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'34', name:'2002年的第一场雪' ,sname:'刀郎'}
				,{id:'35', name:'看我七十二变' ,sname:'蔡依林'}
				,{id:'36', name:'恭喜发财' ,sname:'刘德华'}
				,{id:'37', name:'童话' ,sname:'光良'}
				,{id:'38', name:'寓言' ,sname:'张韶涵'}
				,{id:'39', name:'宁夏' ,sname:'梁静茹'}
				,{id:'40', name:'断点' ,sname:'张敬轩'}
				,{id:'41', name:'快乐崇拜' ,sname:'潘玮柏'}
				,{id:'42', name:'一首简单的歌' ,sname:'王力宏'}
				,{id:'43', name:'孤单北半球' ,sname:'欧得洋'}
				,{id:'44', name:'十年' ,sname:'陈奕迅'}
				,{id:'45', name:'男人海洋' ,sname:'周传雄'}
				,{id:'46', name:'挥着翅膀的女孩' ,sname:'容祖儿'}
				,{id:'47', name:'我们的爱' ,sname:'F.I.R'}
				,{id:'48', name:'第一次爱的人' ,sname:'王心凌'}
			  ];
	</script>
</body>
